<script lang="ts" setup>
import { getStudentJoinClass, joinClassByCode } from '@/api/myclass/myclass';
import { NButton, NTabs, NTabPane, useThemeVars } from 'naive-ui';
import { useClipboard } from '@vueuse/core';
import { onMounted, ref } from 'vue';

const themeVars = useThemeVars();
const visible = ref(false);
const code = ref('');
const courseData = ref<any[]>([]);

const getStudentClassList = async () => {
  try {
    const res = await getStudentJoinClass();
    courseData.value = res.data;
  } catch (error) {
    console.error('获取班级列表失败:', error);
  }
};

const onConfirm = async () => {
  if (code.value === '') {
    window.$message?.warning('请输入班级邀请码');
  }
  try {
    const res: any = await joinClassByCode(code.value);
    if (res.code === 200) {
      window.$message?.success('成功加入班级');
      await getStudentClassList();
      visible.value = false;
      code.value = '';
    } else {
      window.$message?.error(res.msg);
    }
  } catch (error) {
    console.error('加入班级失败:', error);
  }
};


// 封面背景颜色函数
function getCoverBg(index: string) {
  const colors = [
    'linear-gradient(45deg, #06c399, #16a7c9, #2788fb)',
    'linear-gradient(135deg, #7e84f3, #757bf0, #545be5)',
    'linear-gradient(135deg, #482de7, #5b73fd, #5b7cfd)',
    'linear-gradient(135deg, #ffa123, #fe7710, #fd5e05)',
  ];
  return colors[Number(index)];
}

// 复制邀请码功能
const copyInviteCode = (code: string) => {
  const { copy } = useClipboard();
  copy(code).then(() => {
    window.$message?.success('邀请码已复制');
  });
};

onMounted(async () => {
  await getStudentClassList();
});
</script>

<template>
  <div class="class-management">
    <div class="management-card bg-white dark:bg-[#1a1a1a]">
      <div class="header-area">
        <div class="header-content">
          <div class="title-wrapper">
            <h2 class="modern-title text-[#333] dark:text-[#e5e5e5]">
              <icon-mdi:account-group />我的班级
            </h2>
          </div>
          <div class="actions">
            <n-button type="primary" @click="visible = true">
              <template #icon>
                <icon-mdi:plus />
              </template>
              加入班级
            </n-button>
          </div>
        </div>
        <div class="background-image">
          <img
            src="@/assets/images/courses/background.png"
            alt="background"
          />
        </div>
      </div>

      <n-tabs default-value="intro" class="class-tabs">
        <n-tab-pane name="intro" tab="班级">
          <div class="class-list">
            <div
              v-for="classItem in courseData"
              :key="classItem.class_id"
              class="class-card"
            >
              <div
                class="cover"
                :style="{ background: getCoverBg(classItem.class_cover_url) }"
              >
                <div class="cover-overlay"></div>
                <span class="cover-text">{{ classItem.class_name }}</span>
              </div>
              <div class="info">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                >
                  <div class="f-c-c gap-4">
                    <icon-mdi:account-tie-hat />
                    <p class="teacher">{{ classItem.teacher }}</p>
                  </div>
                  <div class="f-c-c gap-4">
                    <icon-mdi:account-child />
                    <span class="students" style="font-size: 13px"
                      >{{ classItem.number_now }}人</span
                    >
                  </div>
                </div>
                <div class="meta">
                  <n-button size="small">查看</n-button>
                  <div class="f-c-c" style="gap: 5px">
                    <!-- <div class="modify">管理</div> -->
                    <span class="invite-code" v-if="classItem.invitation_code">
                      邀请码: {{ classItem.invitation_code }}
                    </span>
                    <icon-mdi:content-copy
                      style="margin-top: 2px"
                      @click.stop="copyInviteCode(classItem.invitation_code)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>

    <!-- 原生模态框实现 -->
    <div v-if="visible" class="modal-overlay" @click.self="visible = false">
      <div class="modal-container">
        <div class="modal-header">
          <h3>加入班级</h3>
        </div>
        <div class="modal-body">
          <div class="flex items-center">
            <label class="w-80">邀请码：</label>
            <n-input
              v-model:value="code"
              placeholder="请输入班级邀请码"
              clearable
            />
          </div>
        </div>
        <div class="modal-footer">
          <n-button @click="visible = false">取消</n-button>
          <n-button type="primary" @click="onConfirm">确认</n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.class-management {
  padding: 16px;
  height: 100%;

  .management-card {
    border-radius: 8px;
    padding: 25px;
    height: calc(100vh - 32px);
    background-color: v-bind('themeVars.cardColor');
    box-shadow: v-bind('themeVars.boxShadow1');
    overflow-y: auto;
  }
}

/* 头部区域样式 */
.header-area {
  display: flex;
  justify-content: space-between;

  .header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 12px;

    .modern-title {
      font-size: 20px;
      font-weight: 500;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      color: v-bind('themeVars.textColor1');

      .icon {
        width: 20px;
        height: 20px;
      }
    }

    .actions {
      display: flex;
      gap: 12px;
    }
  }

  .background-image {
    width: 280px;
    height: 154px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* 班级列表样式 */
.class-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 16px;

  @media (max-width: 1200px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: v-bind('themeVars.modalColor');
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: v-bind('themeVars.boxShadow2');
}

/* 对话框样式 */
.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid v-bind('themeVars.dividerColor');

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: v-bind('themeVars.textColor1');
  }
}

.modal-body {
  padding: 24px;

  p {
    color: v-bind('themeVars.textColor2');
  }
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid v-bind('themeVars.dividerColor');
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 班级列表样式 */
.class-list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-bottom: 5px;

  .class-card {
    position: relative;
    width: 260px;
    border-radius: 8px;
    overflow: hidden;
    background-color: v-bind('themeVars.cardColor');
    box-shadow: v-bind('themeVars.boxShadow1');
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      box-shadow: v-bind('themeVars.boxShadow2');
    }

    &.selected {
      box-shadow: 0 0 0 2px v-bind('themeVars.primaryColor');
    }

    .cover {
      position: relative;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;

      .cover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .cover-text {
        position: relative;
        color: white;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        padding: 0 12px;
        text-align: center;
        z-index: 1;
      }
    }

    .info {
      padding: 12px;

      .title {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: v-bind('themeVars.textColor1');
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .teacher,
      .course {
        margin: 4px 0;
        font-size: 13px;
        color: v-bind('themeVars.textColor3');
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .meta {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;

        .students {
          color: v-bind('themeVars.textColor2');
        }

        .invite-code {
          color: v-bind('themeVars.primaryColor');
          font-weight: 500;
        }
      }
    }

    .checkbox {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 2px solid v-bind('themeVars.borderColor');
      background-color: v-bind('themeVars.baseColor');
      transition: all 0.2s;

      &.checked {
        background-color: v-bind('themeVars.primaryColor');
        border-color: v-bind('themeVars.primaryColor');

        .check-icon {
          display: block;
        }
      }

      .check-icon {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 8px;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: translate(-50%, -60%) rotate(-45deg);
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-area {
    flex-direction: column;

    .background-image {
      width: 100%;
      margin-top: 16px;
    }
  }
}
</style>
